<template>
	<view class="editPatientComplaint-content">
		<view class="title">患者主诉</view>
		<textarea 
			placeholder="请编辑患者主诉" 
			auto-height 
			:value="textarea"
			@input="textareaChange"
		/>
	</view>
	<view class="bottom-button-outer" @tap="confirm()">
		<view class="bottom-button">
			确认
		</view>
	</view>

</template>

<script>
import {
	defineComponent,
	reactive,
	toRefs,
	getCurrentInstance,
	computed
} from "vue"
import { onLoad } from '@dcloudio/uni-app'

export default defineComponent({
	setup() {
		const data = reactive({
			textarea: ""
		})
		
		onLoad((options) => {
			console.log(options, "options")
			data.textarea = options.edit
		})
		
		const confirm = () => {
			uni.$emit("doctorEditBack", {
				textarea: data.textarea
			});
			uni.navigateBack({});
		}
		
		const textareaChange = (e) => {
			// console.log(e, "e")
			data.textarea = e.detail.value
		}
		
		return {
			...toRefs(data),
			confirm,
			textareaChange
		}
	}
})
</script>

<style lang="stylus">
	.editPatientComplaint-content{
		border-top: 16rpx solid #F6F6F7;
		background-color: #fff;
		padding: 36rpx 32rpx 0rpx 32rpx;
		// box-sizing: 
		.title{
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			padding-bottom: 24rpx;
		}
		textarea{
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 28rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			width: auto;
		}
	}
	
	.bottom-button-outer{
		display: flex;
		width: 100%;
		justify-content: center;
		z-index: 1;
		.bottom-button{
			width: 600rpx;
			height: 96rpx;
			background: #FFD300;
			border-radius: 48rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #111111;
			text-align: center;
			line-height: 96rpx;
			position: fixed;
			bottom: 68rpx;
		}
	}
</style>
